#!/bin/bash

# TypeScript 设计模式 React 交互式教程启动脚本

echo "🚀 启动 TypeScript 设计模式 React 交互式教程..."

# 检查Node.js是否安装
if ! command -v node &> /dev/null; then
    echo "❌ 错误: 未找到 Node.js"
    echo "💡 请先安装 Node.js: https://nodejs.org/"
    exit 1
fi

# 检查npm是否安装
if ! command -v npm &> /dev/null; then
    echo "❌ 错误: 未找到 npm"
    echo "💡 请先安装 npm"
    exit 1
fi

# 检查依赖是否已安装
if [ ! -d "node_modules" ]; then
    echo "📦 安装依赖包..."
    npm install
    if [ $? -ne 0 ]; then
        echo "❌ 依赖安装失败"
        exit 1
    fi
fi

# 检查端口是否被占用
PORT=3000
if lsof -Pi :$PORT -sTCP:LISTEN -t >/dev/null ; then
    echo "⚠️  端口 $PORT 已被占用"
    echo "💡 正在尝试使用其他端口..."
    
    # 尝试其他端口
    for port in 3001 3002 3003 3004 3005; do
        if ! lsof -Pi :$port -sTCP:LISTEN -t >/dev/null ; then
            PORT=$port
            echo "✅ 使用端口 $PORT"
            break
        fi
    done
fi

# 启动开发服务器
echo "🌐 启动React开发服务器..."
echo "📍 访问地址: http://localhost:$PORT"
echo ""
echo "✨ 功能特性:"
echo "   📚 23种经典设计模式完整实现"
echo "   🎯 交互式演示和调试"
echo "   💻 实时代码运行"
echo "   📖 详细使用场景说明"
echo "   🎨 美观的现代化界面"
echo ""
echo "🛑 按 Ctrl+C 停止服务器"

# 启动Vite开发服务器
npm run dev -- --port $PORT --host
